<template>
    <div>
        <van-nav-bar title="我的" class="my-nav-bar" />
        <div class="myself">
            <img :src="userData.avtar" alt="个人信息" />
            <div class="spans-container">
                <span class="name">{{ userData.username }}</span>
                <span class="username">@{{ userData.username }}</span>
            </div>
        </div>
        <div class="my-message">
            <van-cell-group title="个人信息">
                <van-cell title="个人资料" icon="contact-o" is-link
                    :to="{ path: '/mypage/message', query: { id: userId } }" />
                <!-- <van-cell title="付款方式" icon="pending-payment" is-link/> -->
            </van-cell-group>
            <van-cell-group title="安全">
                <van-cell title="更改密码" icon="lock" is-link
                    :to="{ path: '/mypage/changepassword', query: { id: userId } }" />
                <van-cell title="忘记密码" icon="warning-o" is-link
                    :to="{ path: '/mypage/forgetpassword', query: { id: userId } }" />
            </van-cell-group>
            <van-cell-group title="系统设置">
                <van-cell title="语言设置" icon="chat-o" is-link to="/mypage/language" />
                <van-cell title="清除缓存" icon="delete-o" value="88 MB" />
            </van-cell-group>
            <van-cell-group title="其他信息">
                <van-cell title="隐私政策" icon="warn-o" is-link to="/mypage/privacypolicy" />
                <van-cell title="帮助支持" icon="question-o" is-link to="/mypage/help" />
            </van-cell-group>
            <van-cell-group title="AI客服">
                <van-cell title="客服" icon="service-o" is-link to="/mypage/ai"/>
            </van-cell-group>
            <van-button plain round type="success" @click="showDialog" class="my-btn">注销</van-button>
        </div>
        <div class="my-tab-bar">
            <van-tabbar v-model="active">
                <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
                <van-tabbar-item name="search" icon="search">探索</van-tabbar-item>
                <van-tabbar-item name="AI"><van-icon name="add" color="#85cc16" size="3rem" /></van-tabbar-item>
                <van-tabbar-item name="friends" icon="like-o">喜欢</van-tabbar-item>
                <van-tabbar-item name="mypage" icon="contact-o">我的</van-tabbar-item>
            </van-tabbar>
        </div>
        <van-dialog v-model:show="show" title="确认注销账号吗" show-cancel-button @confirm="logoff" @cancel="cancle">
            <!-- <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /> -->
        </van-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios';
const active = ref('mypage')
const show = ref(false);
const route = useRoute();
const userId = route.query.id
interface UserData {
    background: string,
    avtar: string,
    surname: string;
    name: string;
    username: string;
    password: string;
    gender: number;
    email: string;
    phonenumber: string;
    birthday: Date
}

const userData = ref<UserData>({
    background: '',
    avtar: '',
    surname: '',
    name: '',
    username: '',
    password: '',
    gender: 0,
    email: '',
    phonenumber: '',
    birthday: new Date()
})

// const data = []

const showDialog = () => {
    show.value = true;
};
const logoff = () => {
    // 这里可以添加注销账号的逻辑
    console.log('账号已注销');
    show.value = false;
};
const cancle = () => {
    show.value = false;
};

const getDate = async () => {
    try {
        const response = await axios.get(`http://localhost:3000/getuserdata/${userId}`);
        if (response.data.success) {
            console.log('用户数据:', response.data.data);
            // 这里可以处理获取到的用户数据
            userData.value = response.data.data;
            console.log('userData:', userData.value);

        } else {
            console.error('获取用户数据失败:', response.data.message);
        }
    } catch (error) {
        console.error('请求错误:', error);
    }
}
onMounted(() => {
    getDate();
})

</script>
<style scoped>
.my-nav-bar {
    text-align: center;
    line-height: 2rem;
    height: 2rem;
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
}

.myself {
    margin-top: 4rem;
    display: flex;
    /* 水平排列图片和 spans 容器 */
    align-items: flex-start;
    /* 默认顶部对齐 */

    .spans-container {
        display: flex;
        flex-direction: column;
        /* 垂直堆叠 spans */
        justify-content: space-between;
        /* 控制 spans 的垂直分布 */
    }

    img {
        width: 4rem;
        border-radius: 50%;
    }

    .name {
        margin-left: 1rem;
        font-size: 1.3rem;
        color: #333;
        align-self: flex-start;
        /* 第一个 span 与图片顶部对齐 */
    }

    .username {
        align-self: flex-end;
        /* 第二个 span 与图片底部对齐 */
        margin-top: 0.8rem;
    }
}

.van-cell-group {
    margin-bottom: 1rem;
}

.my-message {
    margin-top: 2rem;

    span {
        font-size: 0.8rem;
        font-weight: 350;
    }
}

.my-btn {
    width: 20rem;
    height: 3rem;
    margin: 4rem 3.5rem;
}

.my-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}
</style>